<template>
  <Empty>
    <Form
      :form-data="localFormData"
      :control-list="controlList"
      type="submit"
      :inline="false"
      width="500px"
      @entry="entry"
    ></Form>
  </Empty>
</template>

<script>
import Form from "@/views/role/form.vue";
import Empty from "@/views/component/empty/index.vue";
import { stringEmptyValidator } from "@/utils/validator/index";
import { editRoleByUuid } from "@/api/role";
import { showEditOk, showEditNg } from "@/utils/message";

export default {
  name: "EditRoleForm",
  components: {
    Form,
    Empty,
  },
  methods: {
    async entry(formData) {
      try {
        await editRoleByUuid(formData);
        showEditOk();
        this.$router.back();
      } catch (error) {
        showEditNg();
      }
    },
  },
  props: {
    formData: {
      type: Object,
    },
  },
  data() {
    return {
      localFormData: this.formData,
      controlList: [
        {
          type: "input",
          label: "名称",
          prop: "name",
          clearable: true,
          change: (event) => {
            this.formData.name = event ?? "";
          },
          rule: [
            {
              required: true,
              trigger: ["blur", "change"],
              validator: stringEmptyValidator,
            },
          ],
        },
      ],
    };
  },
};
</script>
